<template>
  <view class="main">
    <view class="title">
      <getOrderCount></getOrderCount>
      <getOrderStatusGroup></getOrderStatusGroup>
    </view>
    <view class="title" style="margin-top: 20rpx">
      <i class="icon el-icon-s-data"></i>
      <text style="flex: 1">交易概况</text>
      <text style="font-size: 12px; color: rgba(0, 0, 0, 0.85)"
        >时间筛选：</text
      >
      <vk-data-input-date-time
        v-model="time"
        type="daterange"
        size="small"
        :clearable="false"
        :picker-options="pickerOptions"
      ></vk-data-input-date-time>

      <el-button
        style="margin-left: 10rpx"
        type="primary"
        size="small"
        @click="init"
        >查询</el-button
      >
    </view>
    <detail-order-view ref="detailOrderView" @comp="hidden"></detail-order-view>
    <detail-order-chart ref="detailOrderChart" @comp="hidden"></detail-order-chart>
  </view>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
import getOrderCount from "@/pages/stats/components/order/getOrderCount";
import getOrderCountGroup from "@/pages/stats/components/order/getOrderCountGroup";
import getOrderStatusGroup from "@/pages/stats/components/order/getOrderStatusGroup";
import getRefundOrderCountGroup from "@/pages/stats/components/order/getRefundOrderCountGroup";
import detailOrderView from "./components/order-view";
import detailOrderChart from "./components/order-chart";
export default {
  components: {
    getOrderCount,
    getOrderCountGroup,
    getOrderStatusGroup,
    getRefundOrderCountGroup,
    detailOrderView,
    detailOrderChart,
  },
  data() {
    // 页面数据变量
    return {
      time: [],

      pickerOptions: {
        shortcuts: [
          //今天
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          //昨天
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          //本月
          {
            text: "本月",
            onClick(picker) {
              let { monthStart, monthEnd, todayEnd } = vk.pubfn.getCommonTime(
                new Date()
              );
              picker.$emit("pick", [monthStart, todayEnd]);
            },
          },
          //本年
          {
            text: "本年",
            onClick(picker) {
              let { yearStart, monthEnd, todayEnd } = vk.pubfn.getCommonTime(
                new Date()
              );
              picker.$emit("pick", [yearStart, todayEnd]);
            },
          },
        ],
      },
    };
  },
  mounted(options = {}) {
    that = this;
    vk = that.vk;
    that.options = options;
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.time = [start.getTime(), end.getTime()];
    this.num = 0;
    that.init(options);
  },
  methods: {
    // 页面数据初始化函数
    init(options) {
      let end = this.time[1];
      let endTime = vk.pubfn.getCommonTime(new Date(end));
      let start = this.time[0];
      let startTime = vk.pubfn.getCommonTime(new Date(start));
      this.$refs.detailOrderView.init([startTime.todayStart, endTime.todayEnd]);
      this.$refs.detailOrderChart.init([startTime.todayStart, endTime.todayEnd]);
    },
    // 页面跳转
    pageTo(path) {
      vk.navigateTo(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  align-items: center;
}
</style>

<style lang="scss" scoped>
.main {
  background-color: #f5f5f5;
}

.title {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  .icon {
    border-radius: 50%;
    border: 5px solid rgb(230, 247, 255);
    background-color: rgb(230, 247, 255);
    color: rgb(24, 144, 255);
    margin-right: 6px;
  }
}
</style>
